<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DEMO · 04-06</title>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.0.4/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      body {
        user-select: none;
      }

      .card {
        margin-bottom: 20px;
        padding: 10px;
        border-radius: 4px;
        border: 1px solid #ccc;
        background-color: #fff;
      }

      button {
        background-color: #eee;
        padding: 6px 10px;
        margin-bottom: 10px;
        outline: none;
      }

      button:focus {
        outline: none;
      }
    </style>
  </head>
  <body>
    <h1 class="text-4xl my-7 text-center text-blue-500">JQuery 🔮</h1>
    <main class="w-96 my-0 mx-auto p-8 border rounded-lg shadow-sm bg-gray-50">
      <div class="card shadow">
        <h3 class="text-center mb-3">🌈 元素样式操作</h3>
        <button class="toggle-class w-full mt-2 focus:ring shadow-md">
          添加和移除样式
        </button>
      </div>
      <div class="card shadow">
        <h3 class="text-center mb-3">📑 元素内容操作</h3>
        <input
          type="text"
          value=" Hi 🍙"
          class="input-value border w-full p-2 text-center rounded"
        />
        <button class="get-value w-full mt-2 focus:ring shadow-md">
          取得文本框的值
        </button>
        <button class="set-value w-full mt-2 focus:ring shadow-md">
          设置文本框的值
        </button>
        <button class="clear-value w-full mt-2 focus:ring shadow-md">
          清空文本框的值
        </button>
      </div>
      <div class="card shadow">
        <h3 class="text-center mb-3">🤳 html( ) 与 text( ) 的区别</h3>
        <p
          class="content border border-blue-300 w-full p-2 text-center rounded"
        >
          Hi 🍦
        </p>
        <div class="flex justify-between">
          <button class="func-html w-36 mt-2 focus:ring shadow-md">
            .html( )
          </button>
          <button class="func-text w-36 mt-2 focus:ring shadow-md">
            .val( )
          </button>
        </div>
      </div>
      <div class="card shadow">
        <h3 class="text-center mb-3">🍵 节点操作 - 插入</h3>
        <ul class="node-list-insert list-disc ml-6">
          <li>item-1</li>
          <li>item-2</li>
          <li>item-3</li>
        </ul>
        <div class="flex justify-between">
          <button class="node-append w-36 mt-2 focus:ring shadow-md">
            append
          </button>
          <button class="node-appendto w-36 mt-2 focus:ring shadow-md">
            appendTo
          </button>
        </div>
        <div class="flex justify-between">
          <button class="node-prepend w-36 mt-2 focus:ring shadow-md">
            prepend
          </button>
          <button class="node-prependto w-36 mt-2 focus:ring shadow-md">
            prependTo
          </button>
        </div>
        <div class="flex justify-between">
          <button class="node-after w-36 mt-2 focus:ring shadow-md">
            after
          </button>
          <button class="node-insert-after w-36 mt-2 focus:ring shadow-md">
            insertAfter
          </button>
        </div>
        <div class="flex justify-between">
          <button class="node-before w-36 mt-2 focus:ring shadow-md">
            before
          </button>
          <button class="node-insert-before w-36 mt-2 focus:ring shadow-md">
            insertBefore
          </button>
        </div>
      </div>

      <div class="card shadow">
        <h3 class="text-center mb-3">🍵 节点操作 - 替换</h3>
        <ul class="node-list-replace list-disc ml-6">
          <li>item-1</li>
          <li>item-2</li>
          <li>item-3</li>
        </ul>
        <div class="flex justify-between">
          <button class="node-replace-width w-36 mt-2 focus:ring shadow-md">
            replaceWidth
          </button>
          <button class="node-replace-all w-36 mt-2 focus:ring shadow-md">
            replaceAll
          </button>
        </div>
      </div>

      <div class="card shadow">
        <h3 class="text-center mb-3">🍵 节点操作 - 克隆</h3>
        <button class="node-clone-alert w-full mt-2 focus:ring shadow-md">
          alert()
        </button>
        <div class="flex justify-between">
          <button class="node-clone-false w-36 mt-2 focus:ring shadow-md">
            clone(false)
          </button>
          <button class="node-clone-true w-36 mt-2 focus:ring shadow-md">
            clone(true)
          </button>
        </div>
      </div>

      <div class="card shadow">
        <h3 class="text-center mb-3">🍵 节点操作 - 删除</h3>
        <ul class="node-list-del list-disc ml-6">
          <li>item-1</li>
          <li>item-2</li>
          <li>item-3</li>
        </ul>
        <button class="node-remove w-full mt-2 focus:ring shadow-md">
          remove
        </button>
        <button class="node-detach w-full mt-2 focus:ring shadow-md">
          detach
        </button>
        <button class="node-empty w-full mt-2 focus:ring shadow-md">
          empty
        </button>
      </div>

      <div class="card shadow">
        <h3 class="node-property-title text-center mb-3">🍵 节点操作 - 属性</h3>
        <button class="node-property-set w-full mt-2 focus:ring shadow-md">
          设置属性
        </button>
        <button class="node-property-del w-full mt-2 focus:ring shadow-md">
          删除属性
        </button>
      </div>

      <div class="card shadow">
        <h3 class="text-center mb-3">🍵 节点操作 - 遍历</h3>
        <p>Lorem ipsum dolor sit.</p>
        <ul class="node-list-traverse list-disc ml-6">
          <li>item-1</li>
          <li>item-2</li>
          <li>item-3</li>
        </ul>
        <div>Natus repellendus labore.</div>
        <button class="node-traverse-children w-full mt-2 focus:ring shadow-md">
          children
        </button>
        <button class="node-traverse-next w-full mt-2 focus:ring shadow-md">
          next
        </button>
        <button class="node-traverse-prev w-full mt-2 focus:ring shadow-md">
          prev
        </button>
        <button class="node-traverse-siblings w-full mt-2 focus:ring shadow-md">
          siblings
        </button>
      </div>
    </main>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(() => {
        // 元素样式操作 begin
        $(".toggle-class").click(function () {
          $(this).toggleClass("bg-red-500 text-white");
        });
        // 元素样式操作 end

        // 元素内容操作 begin
        $(".get-value").click(function () {
          alert($(".input-value").val());
        });
        $(".set-value").click(function () {
          $(".input-value").val("123456789");
        });
        $(".clear-value").click(function () {
          $(".input-value").val("");
        });
        //  元素内容操作 end

        // html( ) 与 text( ) begin
        $(".func-html").click(function () {
          $(".content").html("<span>Hello JQuery!</span>");
        });
        $(".func-text").click(function () {
          $(".content").text("<span>Hello JQuery!</span>");
        });
        // html( ) 与 text( ) end

        // 节点操作 - 插入 begin
        $(".node-append").click(function () {
          const ele = "<li>item-new</li>";
          $(".node-list-insert").append(ele);
        });
        $(".node-appendto").click(function () {
          const ele = "<li>item-new</li>";
          $(ele).appendTo(".node-list-insert");
        });
        $(".node-prepend").click(function () {
          const ele = "<li>item-new</li>";
          $(".node-list-insert").prepend(ele);
        });
        $(".node-prependto").click(function () {
          const ele = "<li>item-new</li>";
          $(ele).prependTo(".node-list-insert");
        });
        $(".node-after").click(function () {
          const ele = "<hr/>";
          $(".node-list-insert").after(ele);
        });
        $(".node-insert-after").click(function () {
          const ele = "<hr/>";
          $(ele).insertAfter(".node-list-insert");
        });
        $(".node-before").click(function () {
          const ele = "<hr/>";
          $(".node-list-insert").before(ele);
        });
        $(".node-insert-before").click(function () {
          const ele = "<hr/>";
          $(ele).insertBefore(".node-list-insert");
        });
        // 节点操作 - 插入 end

        // 节点操作 - 替换 begin
        $(".node-replace-width").click(function () {
          const ele = "<li>item-new</li>";
          $(".node-list-replace li:first").replaceWith(ele);
        });
        $(".node-replace-all").click(function () {
          const ele = "<li>item-1</li>";
          $(ele).replaceAll(".node-list-replace li:first");
        });
        // 节点操作 - 替换 begin

        // 节点操作 - 克隆 begin
        $(".node-clone-alert").click(() => {
          alert("🍵");
        });
        $(".node-clone-false").click(function () {
          const clone = $(".node-clone-alert:eq(0)").clone(false);
          $(".node-clone-alert:last").after(clone);
        });
        $(".node-clone-true").click(function () {
          const clone = $(".node-clone-alert:eq(0)").clone(true);
          $(".node-clone-alert:last").after(clone);
        });
        // 节点操作 - 克隆 end

        // 节点操作 - 删除 begin
        $(".node-remove").click(function () {
          $(".node-list-del li:first").remove();
        });
        $(".node-detach").click(function () {
          $(".node-list-del li:first").detach();
        });
        $(".node-empty").click(function () {
          $(".node-list-del li:first").empty();
        });
        // 节点操作 - 删除 end

        // 节点操作 - 属性 begin
        $(".node-property-set").click(function () {
          $(".node-property-title").attr("title", "这是一个标题");
        });
        $(".node-property-del").click(function () {
          $(".node-property-title").removeAttr("title");
        });
        // 节点操作 - 属性 end

        // 节点操作 - 遍历 begin
        $(".node-traverse-children").click(function () {
          const list = $(".node-list-traverse").children();
          list.addClass("text-red-500");
        });
        $(".node-traverse-next").click(function () {
          const list = $(".node-list-traverse").next();
          list.addClass("text-blue-500");
        });
        $(".node-traverse-prev").click(function () {
          const list = $(".node-list-traverse").prev();
          list.addClass("text-green-500");
        });
        $(".node-traverse-siblings").click(function () {
          const list = $(".node-list-traverse").siblings();
          list.addClass("text-purple-500");
        });
        // 节点操作 - 遍历 end
      });
    </script>
  </body>
</html>
